/**
 * antd theme config layout
 */
import { theme, ThemeConfig } from 'antd'
import { ConfigProvider } from 'antd'
import { useTheme } from 'next-themes'
import React from 'react'
import { AntdRegistry } from '@ant-design/nextjs-registry'
import zh_CN from 'antd/locale/zh_CN'

const { darkAlgorithm } = theme

export default function AntdProviders({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  const { theme: themeType } = useTheme()

  const colorToken = {
    colorPrimary: '#000000',
    colorInfo: '#000000'
  }

  const token = (colorToken?: any) => ({
    token: {
      ...colorToken,
      borderRadius: 8,
      wireframe: false
    }
  })

  const dafault: ThemeConfig = token(colorToken)

  const themeStyle =
    themeType !== 'dark'
      ? dafault
      : {
          algorithm: [darkAlgorithm],
          ...token()
        }
  return (
    <AntdRegistry>
      <ConfigProvider
        locale={zh_CN}
        theme={{
          ...themeStyle,
          components: {
            Menu: {
              /* 这里是你的组件 token */
              darkItemBg: '#1F2937',
              darkSubMenuItemBg: '#1F2937',
              activeBarBorderWidth: 0,
              subMenuItemBg: '#ffffff00',
              darkItemHoverBg: '#414148',
              darkItemSelectedBg: '#414148',
              itemHoverBg: '#D4D4D7',
              itemSelectedBg: '#D4D4D7',
              itemHoverColor: 'rgba(0, 0, 0, 0.88)',
              itemSelectedColor: 'rgba(0, 0, 0, 0.88)'
            }
          }
        }}
      >
        {children}
      </ConfigProvider>
    </AntdRegistry>
  )
}
